<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>生鲜商城</title>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
<el-container id="app">
    <!--头部导航 -->
    <el-header style="height:510px">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
        >
            <div class="demo-image">
                <div class="block" :key="img.headbg">
                    <el-image
                            style="width: 1920px; height: 440px"
                            :src="img.headbg"
                            :fit="img.headbg">
                    </el-image>
                </div>
            </div>
            <el-menu-item index="0">首页</el-menu-item>
            <el-menu-item index="1">用户</el-menu-item>
            <el-menu-item index="2">商品</el-menu-item>
            <el-menu-item index="3">优惠券</el-menu-item>
            <el-menu-item index="4">秒杀</el-menu-item>
            <el-menu-item index="5">数据统计</el-menu-item>
            <el-menu-item index="6">登出</el-menu-item>
        </el-menu>
        <div class="line"></div>
    </el-header>
    <!-- 主体部分 请在下方写代码 -->
    <el-main>
        <!--商品新增-->
        <el-button type="text" @click="insertProductFrom = true">新增商品</el-button>
        <el-dialog title="新增商品" :visible.sync="insertProductFrom">
            <el-form :model="productFrom">
                <el-form-item label="商品名字" :label-width="formLabelWidth">
                    <el-input v-model="productFrom.productName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" :label-width="formLabelWidth">
                    <el-input v-model="productFrom.productPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" :label-width="formLabelWidth">
                    <el-input v-model="productFrom.productNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="保质期(天)" :label-width="formLabelWidth">
                    <el-input v-model="productFrom.productExpireTime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品来源" :label-width="formLabelWidth">
                    <el-input v-model="productFrom.source" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品类型" :label-width="formLabelWidth">
                    <el-select v-model="productFrom.productTypeId" placeholder="请选择商品类型">
                        <div v-for="type of productType">
                            <el-option :label="type.productTypeName" :value="type.productTypeId"></el-option>
                        </div>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="/freshmarket/product/uploadImg"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="submitUploadSuccess"
                            :multiple="false"
                            :limit="1"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取商品图片(限一张)</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                        </el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeInsert">取 消</el-button>
                <el-button type="primary" @click="insertProduct">确 定</el-button>
            </div>
        </el-dialog>
        <!--        新增批次-->
        <el-button type="text" @click="insertProductBatchWindow = true">新增批次</el-button>
        <el-dialog title="新增商品" :visible.sync="insertProductBatchWindow">
            <el-form :model="productBatchFrom">
                <el-form-item label="商品ID" :label-width="formLabelWidth">
                    <el-input v-model="productBatchFrom.productId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="批次数量" :label-width="formLabelWidth">
                    <el-input v-model="productBatchFrom.productBatchNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="批次来源" :label-width="formLabelWidth">
                    <el-input v-model="productBatchFrom.productBatchSource" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeInsertBatch">取 消</el-button>
                <el-button type="primary" @click="insertProductBatch">确 定</el-button>
            </div>
        </el-dialog>
        <div class="line"></div>
        <!--        商品查询-->

        <el-select v-model="productSelectFrom.productTypeId" @change="selectProduct" placeholder="请选择">
            <el-option label="全部" value="0"></el-option>
            <el-option
                    v-for="item in productType"
                    :key="item.productTypeId"
                    :label="item.productTypeName"
                    :value="item.productTypeId">
            </el-option>
        </el-select>
        <el-select v-model="productSelectFrom.productStatus" @change="selectProduct" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="已上架" value="已上架"></el-option>
            <el-option label="已下架" value="已下架"></el-option>
        </el-select>
        <el-select v-model="productSelectFrom.expire" @change="selectProduct" placeholder="请选择">
            <el-option label="全部" value="0"></el-option>
            <el-option label="未过期" value="1"></el-option>
            <el-option label="已过期" value="2"></el-option>
        </el-select>

        <br>
        <div class="line"></div>

        <template>
            <el-table
                    :data="product"
                    border
                    style="width: 1500px">
                <el-table-column
                        fixed
                        prop="productId"
                        label="商品ID"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="productName"
                        label="名称"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="productPrice"
                        label="价格"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="productExpireTime"
                        label="保质期"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="productStatus"
                        label="商品状态"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="productTypeName"
                        label="类型"
                        width="100">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="productBatchId"
                        label="批次ID"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="productBatchNum"
                        label="批次数量"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="productNum"
                        label="商品总数"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="productBatchSource"
                        label="批次来源"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="productBatchOperationTime"
                        label="批次进货时间"
                        width="250">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" onclick="putDownProductBatch(this)" size="small">下架批次</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="block">
            <el-pagination
                    @current-change="pageChange"
                    layout="prev, pager, next"
                    :total="50">
            </el-pagination>
        </div>
    </el-main>
</el-container>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            //此处请改为对应的选项
            activeIndex: "2",
            productType: [],
            product: [],
            img: {
                headbg: '/img/bg/banner3back.jpg',
            },
            productFrom: {
                productName: '',
                productPrice: '',
                productNum: '',
                productExpireTime: '',
                source: '',
                productTypeId: '',
                productImg: '',
            },
            formLabelWidth: '120px',
            insertProductFrom: false,
            productSelectFrom: {
                productTypeId: "0",
                productStatus: '',
                expire: '0',
                pageIndex:'1',
            },
            productBatchFrom: {
                productId: "",
                productBatchNum: "",
                productBatchSource: "",
            },
            insertProductBatchWindow: false,
        },
        methods: {
            pageChange:function(pg){
                var vm=this;
                vm.productSelectFrom.pageIndex=pg;
                vm.selectProduct();
            },
            //新增批次
            insertProductBatch: function () {
                var vm = this;
                $.ajax({
                    url: '/freshmarket/product-batch/insertProductBatch',
                    data: vm.productBatchFrom,
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        if (data.success == true) {
                            alert("新增成功")
                            vm.closeInsertBatch();
                            vm.selectProduct();
                        } else {
                            alert(data.message)
                        }
                    }
                })
            },
            //关闭新增批次
            closeInsertBatch: function () {
                this.insertProductBatchWindow = false;
            },
            //查询商品
            selectProduct: function () {
                var vm = this;
                $.ajax({
                    url: "freshmarket/product/selectProduct",
                    data: vm.productSelectFrom,
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        if (data.success == true) {
                            vm.product = data.data;
                        } else {
                            alert(data.message)
                        }
                    }
                })
            },
            //上传图片
            submitUpload() {
                this.$refs.upload.submit();
            },
            //上传图片成功后的回调
            submitUploadSuccess: function (response, file, fileList) {
                if (response.success == true) {
                    this.productFrom.productImg = response.data;
                } else {
                    alert(response.message)
                }
            },
            handleRemove(file, fileList) {
                // this.deleteInsertImg();
            },
            handlePreview(file) {
                console.log(file);
            },
            //新增窗口关闭
            closeInsert: function () {
                // this.deleteInsertImg();
                this.insertProductFrom = false;
            },
            //新增窗口确定
            insertProduct: function () {
                var vm = this;
                if (vm.productFrom.productName == null) {
                    alert("请输入商品名")
                } else if (vm.productFrom.productPrice == null || vm.productFrom.productPrice <= 0) {
                    alert("请输入正确的价格")
                } else if (vm.productFrom.productNum == null || vm.productFrom.productNum <= 0) {
                    alert("请输入正确的商品数量")
                } else if (vm.productFrom.productExpireTime == null) {
                    alert("请输入保质期")
                } else if (vm.productFrom.source == null) {
                    alert("请输入来源信息")
                } else if (vm.productFrom.productTypeId == '') {
                    alert("请选择类型")
                } else if (vm.productFrom.productImg == null) {
                    alert("请上传图片")
                } else {
                    $.ajax({
                        url: "http://localhost:8080/freshmarket/product/insertProduct",//TODO 请求地址
                        data: vm.productFrom,
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data.success == true) {
                                alert("新增成功")
                                vm.productFrom.productName = '';
                                vm.productFrom.productPrice = '';
                                vm.productFrom.productNum = '';
                                vm.productFrom.productExpireTime = '';
                                vm.productFrom.source = '';
                                vm.productFrom.productTypeId = '';
                                vm.productFrom.productImg = '';
                                vm.insertProductFrom = false;
                            } else {
                                alert(data.message)
                            }
                        }
                    })
                }

            },
            //删除上传的照片
            deleteInsertImg: function () {
                var vm = this;
                $.ajax({
                    url: "/freshmarket/product/deleteImg",
                    data: "url=" + vm.productFrom.productImg,
                    dataType: 'json',
                    type: "post",
                    success: function (data) {
                        if (data.success == false) {
                            console.log(data.message)
                        }
                    }
                })
            },
            //导航 添加中
            handleSelect: function (key, keyPath) {
                console.log(key, keyPath);
                if (key == 0) {
                    window.location.href = "/index"
                } else if (key == 1) {
                    window.location.href = "/user"
                } else if (key == 2) {
                    window.location.href = "/product"
                } else if (key == 3) {
                    window.location.href = "/coupon"
                } else if (key == 4) {
                    window.location.href = "/limited"
                } else if (key == 5) {
                    window.location.href = "/statistics"
                } else if (key == 6) {
                    $.ajax({
                        url: "/logout",
                    })
                }
            },

        },
        //生命周期初始化
        mounted: function () {
            var vm = this;
            $.ajax({
                url: "/freshmarket/product-type/getList",
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {
                        vm.productType = data.data;
                    } else {
                        console.log(data.message);
                    }
                },
            });
            vm.selectProduct();
        },
    });

    function putDownProductBatch(th) {
        var id = $(th).parent().parent().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().children().html();
        $.ajax({
            url: "/freshmarket/product-batch/putDownProductBatch",
            data: "productBatchId=" + id,
            dataType: "json",
            type: "post",
            success: function (data) {
                if (data.success == true) {
                    alert("下架成功")
                    app.selectProduct();
                } else {
                    alert(data.message)
                }
            }
        })
    }
</script>
</body>
</html>
